<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    body, header {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    #header {
        background: #267AF0;
        width: 100%;
        height: 40px;
        box-shadow: 0px 0px 5px black;
    }
    #nav_bar {
        position: relative;
        background: #303030;
        width: 100%;
        height: 30px;
        margin: 0px;
        padding: 0px;
        text-align: center;
    }
    .nav_bar_item:nth-child(4) {
        border-bottom: solid #ff5312 6px;
        background-color: #565656;
    }
    .nav_bar_item {
        cursor: pointer;
        height: 30px;
        width: 12%;
        overflow: hidden;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        color: white;
        font-family: Calibri;
        font-size: 14px;
        line-height: 30px;
        margin: 0px -2px 0px -2px;
        display: inline-block;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        -webkit-transition: all 100ms ease;
        -moz-transition: all 100ms ease;
        transition: all 100ms ease;
    }
    .nav_bar_item:hover {
        border-bottom: solid #bef812 6px;
        background-color: #565656;
        -webkit-transition: all 100ms ease;
        -moz-transition: all 100ms ease;
        transition: all 100ms ease;
    }
    .nav_bar_item > a:link {
        color: white;
        font-family: Calibri;
        font-size: 14px;
        line-height: 30px;
        text-decoration: none;
    }
    .nav_bar_item > a:visited {
        color: white;
        font-family: Calibri;
        font-size: 14px;
        line-height: 30px;
        text-decoration: none;
    }
    .nav_bar_item > a:hover {
        color: white;
        font-family: Calibri;
        font-size: 14px;
        line-height: 30px;
        text-decoration: none;
    }
    .nav_bar_item > a:active {
        color: white;
        font-family: Calibri;
        font-size: 14px;
        line-height: 30px;
        text-decoration: none;
    }
    #header p {
        font-family: Calibri;
        font-size: 12px;
        color: white;
        text-align: right;
        line-height: 30px;
        margin: 0px;
        margin-right: 50px;
    }
    .arrow-down {
        cursor: pointer;
        width: 0px;
        height: 0px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid white;
        position: relative;
        float: right;
        top: -18px;
        right: 18px;
        opacity: 0.7;
    }
    .arrow-down:hover {
        opacity: 1;
    }
    #options_panel {
        width: 150px;
        height: 60px;
        position: fixed;
        top: 40px;
        right: 0px;
        box-shadow: #909090 3px 3px 5px;
        display: none;
    }
    .options_panel_item {
        cursor: pointer;
        padding-left: 10px;
        width: calc(100% - 10px);
        background-color: #267AF0;
        opacity: 0.8;
        color: white;
        font-family: Calibri;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
    }
    .options_panel_item:hover {
        opacity: 1;
    }
    #logo_container {
        position: relative;
        top: 5px;
        margin-left: 5px;
    }
    #logo {
        position: relative;
        background: white;
        height: 30px;
        width: 30px;
        float: left;
    }
    #logo_text {
        top: -1px;
        margin-left: 3px;
        position: relative;
        font-family: Century Gothic;
        color: white;
        float: left;
        line-height: 16px;
        font-size: 20px;
    }
    #content {
        margin: 0px;
        margin-top: 15px;
        position: absolute;
        width: 100%;
        height: calc(100% - 45px);
    }
    #main_image {
        width: calc(80% + 2px);
        background: #b4b2b2;
        position: relative;
        margin: auto;
        margin-top: 10px;
        border: solid gray 1px;
        text-align: left;
    }
    .content_devider {
        margin-top: 20px;
        width: 30%;
        position: relative;
        float: left;
        text-align: center;
    }
    .content_devider input[type="text"] {
        width: 90%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        border: solid 1px gray;
        padding: 1px;
    }
    .content_devider select {
        width: calc(90% + 4px);
        position: relative;
        margin-left: auto;
        margin-right: auto;
        border: solid 1px gray;
        padding: 1px;
    }
    .content_devider textarea {
        width: 90%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        border: solid 1px gray;
        padding: 1px;
        resize: vertical;
        font-family: Verdana, Geneva, sans-serif;
        margin-bottom: -3px;
    }
    #size_selector {
        width: calc(90% + 2px);
        margin: auto;
        margin-top: 3px;
        border: solid 1px gray;

    }
    .size_box {
        cursor: pointer;
        -webkit-user-select: none;
        background: #18a3e0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 50px;
        color: white;
        font-family: Calibri;
        margin: 5px;
        display: inline-block;
    }
    .size_box:hover {
        background: #0084be;
    }
    .size_box:active {
        background: #8b8b8b;
    }
    #box_s {
        width: 50px;
        height: 50px;
    }
    #box_m {
        width: 100px;
        height: 50px;
    }
    #box_l {
        width: 100px;
        height: 100px;
        line-height: 100px;
        background: #8b8b8b;
    }
    #tile_image {
        width: calc(90% + 2px);
        background: #b4b2b2;
        position: relative;
        margin: auto;
        margin-top: 20px;
        border: solid gray 1px;
        text-align: left;
        margin-bottom: 20px;
    }
    #author_box {
        width: calc(90% + 2px);
        height: 100px;
        background: #b4b2b2;
        position: relative;
        margin: auto;
        margin-top: 20px;
        border: solid gray 1px;
        margin-bottom: 20px;
    }
    #richText {
        width: 70%;
        margin-bottom: 20px;
    }
</style>
<script type="text/javascript" src="../../public/tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">

var draging = false;
var positionX = 0;
var positionY = 0;
var lastX = 0;
var lastY = 0;
var currentX = 0;
var currentY = 0;
var dim_h = 2;
var dim_v = 2;

window.addEventListener("resize", formatImageSizes);
window.addEventListener("load", formatImageSizes);
window.addEventListener("load", init);
window.addEventListener("load", optionsMenu);

function optionsMenu()
{
    var arrow = document.getElementById("options");
    var options = document.getElementById("options_panel");
    arrow.onclick = function() { options.style.display = "block"; };
}

function init()
{
    var box_s = document.getElementById("box_s");
    var box_m = document.getElementById("box_m");
    var box_l = document.getElementById("box_l");

    box_s.onclick = function () { box_s.style.background = "#8b8b8b"; box_m.style.background = "#18a3e0"; box_l.style.background = "#18a3e0"; changeTileImageDimension("S"); dim_h = 1; dim_v = 1; };
    box_m.onclick = function () { box_s.style.background = "#18a3e0"; box_m.style.background = "#8b8b8b"; box_l.style.background = "#18a3e0"; changeTileImageDimension("M"); dim_h = 2; dim_v = 1; };
    box_l.onclick = function () { box_s.style.background = "#18a3e0"; box_m.style.background = "#18a3e0"; box_l.style.background = "#8b8b8b"; changeTileImageDimension("L"); dim_h = 2; dim_v = 2; };

    var main_image = document.getElementById("main_image");
    var main_image_file = document.getElementById("main_image_file");
    main_image_file.onchange = function () { readImage(this, main_image); }
    dragImage(main_image);

    var tile_image = document.getElementById("tile_image");
    var tile_image_file = document.getElementById("tile_image_file");
    tile_image_file.onchange = function () { readImage(this, tile_image); };
    dragImage(tile_image);

    fillCategoriesAsync();

    var mainDataHeight = document.getElementById("mainData").clientHeight - 124 + "px";

    tinymce.init({
        selector: "#textEditor",
        resize: false,
        width: "98%",
        height: mainDataHeight,
        statusbar: false,
        fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor fontsizeselect fontselect emoticons | Post",
        image_advtab: true,
        setup: function (editor) {
            editor.addButton('Post', {
                text: 'Posalji!',
                icon: false,
                onclick: function () {
                    sendNewPost();
                }
            });
        }
    });
}

function formatImageSizes()
{
    var main_image = document.getElementById("main_image");
    main_image.style.height = main_image.clientWidth / 6 + "px";

    var tile_image = document.getElementById("tile_image");
    tile_image.style.height = tile_image.clientWidth + "px";
}

function changeTileImageDimension(size)
{
    var tile_image = document.getElementById("tile_image");

    switch (size)
    {
        case "S":
        {
            tile_image.style.width = "calc(45% + 2px)";
            tile_image.style.height = tile_image.clientWidth + "px";
            break;
        }
        case "M":
        {
            tile_image.style.width = "calc(90% + 2px)";
            tile_image.style.height = tile_image.clientWidth / 2 + "px";
            break;
        }
        case "L":
        {
            tile_image.style.width = "calc(90% + 2px)";
            tile_image.style.height = tile_image.clientWidth + "px";
            break;
        }
    }
}

function readImage(input, imageBox)
{
    if (input.files && input.files[0])
    {
        var reader = new FileReader();

        reader.onload = function (e)
        {
            imageBox.style.backgroundImage = "url(" + e.target.result + ")";
            //imageBox.style.backgroundSize = "cover";
            imageBox.style.backgroundRepeat = "no-repeat";
            imageBox.style.cursor = "move";
            imageBox.style.backgroundPositionX = 0;
            imageBox.style.backgroundPositionY = 0;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

function dragImage(imageBox)
{
    imageBox.onmousedown = function (e)
    {
        draging = true;
        lastX = e.x;
        lastY = e.y;
    };
    window.onmouseup = function ()
    {
        draging = false;
        positionX += currentX;
        positionY += currentY;
    };
    imageBox.onmousemove = function (e)
    {
        if (draging)
        {
            currentX = (lastX - e.x) * -1;
            currentY = (lastY - e.y) * -1;
            imageBox.style.backgroundPositionX = positionX + currentX + "px";
            imageBox.style.backgroundPositionY = positionY + currentY + "px";
        }
    };
}

function sendDataAsync(id_kategorija, naslov, podnaslov, opis, sadrzaj, video_url, dim_h, dim_v, tagovi, id_autor, tile_img_file, post_img_file)
{
    var tile_image = tile_img_file.files[0];
    var post_image = post_img_file.files[0];

    var frmData = new FormData();
    frmData.append("tile_image", tile_image);
    frmData.append("post_image", post_image);

    frmData.append("id_kategorija", id_kategorija);
    frmData.append("naslov", naslov);
    frmData.append("podnaslov", podnaslov);
    frmData.append("opis", opis);
    frmData.append("sadrzaj", sadrzaj);
    frmData.append("video_url", video_url);
    frmData.append("dim_h", dim_h);
    frmData.append("dim_v", dim_v);
    frmData.append("tagovi", tagovi);
    frmData.append("id_autor", id_autor);
    frmData.append("posX", positionX + currentX);
    frmData.append("posY", positionY + currentY);

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            alert("Parametri poslati");
        }
    }
    xmlhttp.open("POST", "http://localhost/laravel/public/vesti/snimiVest", true);
    xmlhttp.send(frmData);
}

function sendNewPost()
{
    var kategorija = document.getElementById("cbKategorije");
    var id_kategorija = kategorija.options[kategorija.selectedIndex].value;
    var naslov = document.getElementById("txtNaslov").value;
    var podnaslov = document.getElementById("txtPodnaslov").value;
    var opis = document.getElementById("txtOpis").value;
    var sadrzaj = tinyMCE.activeEditor.getContent();
    var video_url = document.getElementById("txtVideoLink").value;
    var tagovi = document.getElementById("txtTagovi").value;
    var id_autor = 1;//Iz cb autor
    var tile_image = document.getElementById("tile_image_file");
    var post_image = document.getElementById("main_image_file");
    sendDataAsync(id_kategorija, naslov, podnaslov, opis, sadrzaj, video_url, dim_h, dim_v, tagovi, id_autor, tile_image, post_image);
}

function fillCategoriesAsync()
{
    var categories = document.getElementById("cbKategorije");

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var jsonArray = JSON.parse(xmlhttp.responseText);

            for (var i = 0; i < jsonArray.length; i++)
            {
                var item = document.createElement("option");
                item.text = jsonArray[i].naziv;
                item.value = jsonArray[i].id;
                categories.appendChild(item);
            }
        }
    }
    xmlhttp.open("GET", "http://localhost/laravel/public/vesti/kategorije", true);
    xmlhttp.send();
}

</script>
</head>
<body>
<div id="header">
    <div id="logo_container">
        <div id="logo"></div>
        <div id="logo_text">Balkan<br />Reporter</div>
        <p>Prijavljeni ste kao: <?php print(Session::get('ime') . " " . Session::get('prezime'));?></p>
        <div id="options" class="arrow-down"></div>
    </div>
</div>
<div id="nav_bar">
    <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/adminpanel">Pregled postova</a></div>
    <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/vesti/nova">Novi post</a></div>
    <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/baner/nova">Novi baner</a></div>
    <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/promo/nova">Novi promo</a></div>
    <div class="nav_bar_item"><a href="http://localhost/laravel/public/admin/korisnici/korisnici">Pregled korisnika</a></div>
</div>
<div id="content">
    <div id="main_image"><input type="file" id="main_image_file" /></div>
    <div class="content_devider" id="mainData">
        <select id="cbKategorije"><option disabled selected value="-1">Kategorija</option></select>
        <input type="text" placeholder="Naslov" id="txtNaslov" />
        <input type="text" placeholder="Podnaslov" id="txtPodnaslov" />
        <textarea placeholder="Opis" id="txtOpis" ></textarea>
        <input type="text" placeholder="Video link http://" id="txtVideoLink" />
        <input type="text" placeholder="Tagovi (odvojeni karakterom ;)" id="txtTagovi" />
        <div id="size_selector">
            <div class="size_box" id="box_s">S</div>
            <div class="size_box" id="box_m">M</div>
            <div class="size_box" id="box_l">L</div>
        </div>
        <div id="tile_image"><input type="file" id="tile_image_file" /></div>
        <div id="author_box"></div>
    </div>
    <div class="content_devider" id="richText">
        <textarea id="textEditor"></textarea>
    </div>
</div>
<div id="options_panel">
    <div class="options_panel_item">Promena lozinke</div>
    <div class="options_panel_item">Odjavi se</div>
</div>
</body>
</html>